<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vscode创建的</title>

    <style>
        table {
            border: blue 1px solid;
            /* 相邻的边框实现使用一个边框，减少样式的重复 */
            border-collapse: collapse;
            font-size: 15px;
            text-align: center;

        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    测试创建的数据
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <p1>标题显示</p1>
    <p>段落显示，<strong>测试数据</strong>的添加操作<em><br />的样式</em>。<del>实现段落</del>存在<ins>的性质</ins></p>
    <div>
        <p4>测试图片大小</p4>
        <img src="张昶.jpg" width="100px" height="100px" border="1" alt="12121212" title="44444" />
    </div>

    <!-- 单元格的判断属性 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张昶</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>张昶</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>张昶</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>张昶</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </table><br />
    <!-- 设置单元格的属性 -->
    <table border="1" align="center" cellpadding="20" cellspacing="0">
        <tr>
            <td>排名</td>
            <td>关键字</td>
            <td>趋势</td>
            <td>今日搜索</td>
            <td>最近七日</td>
            <td>相关链接</td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>|||</td>
            <td>345</td>
            <td>121</td>
            <td>贴吧 图片 百科 </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>|||</td>
            <td>345</td>
            <td>121</td>
            <td>贴吧 图片 百科 </td>
        </tr>
        <tr>
            <td>2</td>
            <td>鬼吹灯</td>
            <td>|||</td>
            <td>345</td>
            <td>121</td>
            <td>贴吧 图片 百科 </td>
        </tr>
        <tr>
            <td>3</td>
            <td>鬼吹灯</td>
            <td>|||</td>
            <td>345</td>
            <td>121</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
    </table><br />

    <!-- 跨行单元格 跨列单元格 -->
    <table border="1" width="600" height="200" align="center" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>

        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>

            <td></td>
            <td></td>
        </tr>
    </table>

    <!-- 无序列表 -->
    <h4>无序列表</h4>
    <ul>
        <li>苹果</li>
        <li>西红柿</li>
        <li>榴莲</li>
    </ul>

    <!-- 有序队列 -->
    <h4>有序队列</h4>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <form>
        <label for="username"> 用户名：</label>
        <input name="username" id="username">
        <label for="sex"> 性别：</label>
        <label for="sex">男</label><input type="radio" name="sex" /> <label for="sex">女</label> <input type="radio"
            name="sex" />

        <textarea rows="2" cols="30"></textarea>
    </form>





</body>

</html>